<template>
	<!-- 平台奖励 -->
	<view>
		<view class="fund-contain">
			<view class="fund-contain-amount">
				<view class="">
					¥1<text>.00</text>
				</view>
				<view class="">
					可提现
				</view>
			</view>
			<view class="fund-contain-title">
				我的余额（元）
			</view>
		</view>
		<view class="deposit-fund first-style">
			<view class="deposit-fund-content">
				<view class="deposit-fund-content-details">
					<view class="">¥1.<text>00</text></view>
					<view class="">总金额(元)</view>
				</view>
				<view class="deposit-fund-line"></view>
				<view class="deposit-fund-content-details">
					<view class="">¥0.<text>00</text></view>
					<view class="">待结算(元)</view>
				</view>
			</view>
			<view class="deposit-binding" @click="depositClick">
				提现到微信零钱
			</view>
			<view class="deposit-binding-tip">
				1-3个工作日到账
			</view>
		</view>
		<view>
			<view class="group-state-title">
				<view class="">
					<view class="group-state-contain">
						<view :class="groupStatusIndex==index?'group-state-active':''" v-for="(item,index) in groupStatus" :key='index' @click="stateClick(index)">
							{{item}}
						</view>
					</view>
				</view>
			</view>
			<view v-if="groupStatusIndex == 0">
				<view class="act-course-content">
					<view class="group-state-msg">
						<view class="group-state-msg-left">
							<image :src="imglink + 'home/member-img.png'" mode=""></image>
							<text>小王子</text>
						</view>
						<view class="group-state-msg-right">
							下单时间：<text>2020-01-23 15:23:36</text>
						</view>
					</view>
					<view class="act-course-details">
						<view class="act-course-details-title">
							<text>课程名称</text>
							<text>成交额</text>
							<text>平台奖励</text>
						</view>
						<view class="act-course-details-common" v-for="(item,index) in actCourseHeader" :key='index'>
							<text>{{item.name}}</text>
							<text style="margin-left: 100upx;line-height: 64upx;">{{item.business}}</text>
							<text style="margin-left: 120upx;line-height: 64upx;color: #FF391F;">{{item.award}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="expend-content" v-else>
				<view class="expend-details-content">
					<view class="expend-details-time">2020-01-12 12:00:00</view>
					<view class="expend-details-state">
						<view class="expend-state-hand">提现中</view>
						<view class="">-¥18000.00</view>
					</view>
				</view>
				<view class="expend-details-content">
					<view class="expend-details-time">2020-01-12 12:00:00</view>
					<view class="expend-details-state">
						<view class="expend-state-succed">提现成功</view>
						<view class="">-¥18000.00</view>
					</view>
				</view>
				<view class="expend-details-content">
					<view class="expend-details-time">2020-01-12 12:00:00</view>
					<view class="expend-details-state">
						<view class="expend-state-bad">提现失败</view>
						<view class="">-¥18000.00</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				imglink: this.$store.state.imgLink,
				groupStatus:['收益明细','支出明细'],
				groupStatusIndex:1,
				actCourseHeader:[
					{name:'新东方GRE课程8节线下体验课，双十二特权活动…',business:'¥500.00',award:'¥1.00'},
				],
				store_id:''
			}
		},
		onLoad(options) {
			let store_id = parseInt(options.store_id,10);
			console.log('进入了onload 获取url的store_id',store_id)
			if(!store_id > 0){
				store_id = uni.getStorageSync('store_id')?parseInt(uni.getStorageSync('store_id'),10):0
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			
			this.store_id = parseInt(store_id,10)
			this.$store.commit('updateStoreId',store_id)
		},
		methods:{
			stateClick(index){
				this.groupStatusIndex = index
			},
			depositClick(){
				uni.navigateTo({
					url:'withdrawalDeclare/withdrawalDeclare?store_id=' + this.store_id
				})
			}
		}
	}
</script>

<style>
	page{
		background: #F3F3F4;
	}
	.fund-contain{
		width: 100%;
		height: 408upx;
		background: url(https://tool.tuanhaoke.cn/static/image/member/fund.png) no-repeat;
		background-size: 100% 100%;
		padding-top: 46upx;
		box-sizing: border-box;
	}
	.fund-contain-amount{
		position: relative;
	}
	.fund-contain-amount>view:first-child{
		text-align: center;
		color: #FFFFFF;
		font-size: 60upx;
		margin-top: 14upx;
	}
	.fund-contain-amount>view:first-child>text{
		font-size: 40upx;
	}
	.fund-contain-amount>view:last-child{
		width: 78upx;
		height: 28upx;
		line-height: 28upx;
		text-align: center;
		color: #FF8B46;
		font-size: 20upx;
		border-radius: 18upx 18upx 18upx 0;
		background: #FFFFFF;
		position: absolute;
		top: -16upx;right: 252upx;
	}
	.fund-contain-title{
		text-align: center;
		color: #FFFFFF;
		font-size: 20upx;
		margin-top: 10upx;
	}
	.deposit-fund{
		width: 100%;
		height: 356upx;
		background: #FFFFFF;
		padding: 30upx 30upx;
		box-sizing: border-box;
		margin-bottom: 20upx;
	}
	.first-style{
		border-radius: 24upx 24upx 0 0;
		margin-top: -162upx;
	}
	.deposit-fund-content{
		display: flex;
		justify-content: space-between;
		margin-top: 20upx;
	}
	.deposit-fund-content-details{
		flex-grow: 1;
	}
	.deposit-fund-content-details>view:first-child{
		color: #333333;
		font-size: 36upx;
		text-align: center;
		flex-grow: 1;
	}
	.deposit-fund-content-details>view:first-child>text{
		font-size: 28upx;
	}
	.deposit-fund-content-details>view:last-child{
		color: #999999;
		font-size: 24upx;
		margin-top: 4upx;
		text-align: center;
		flex-grow: 1;
	}
	.deposit-fund-line{
		width: 2upx;
		height: 46upx;
		border-left: 2upx solid #EFEFEF;
		margin-top: 18upx;
	}
	.deposit-binding{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		color: #FFFFFF;
		text-align: center;
		margin: 0 auto;
		margin-top: 50upx;
		border-radius: 44upx;
		font-size: 32upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 8upx 18upx 0 rgba(255, 111, 95, 0.18);
	}
	.deposit-binding-tip{
		text-align: center;
		color: #333333;
		font-size: 24upx;
		margin-top: 30upx;
	}
	.group-state-title{
		width: 100%;
		background: #FFFFFF;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.group-state-title>view{
		padding: 18upx 0;
		box-sizing: border-box;
		width: 100%;
		border-bottom: 1upx solid #DEDEDE;
	}
	.group-state-contain{
		width: 100%;
		height: 64upx;
		line-height: 64upx;
		display: flex;
		background: #F2F2F2;
		border-radius: 32upx;
	}
	.group-state-contain>view{
		width: 50%;
		text-align: center;
		color: #666666;
		font-size: 28upx;
		border-radius: 32upx;
	}
	.group-state-contain .group-state-active{
		background: linear-gradient(to right,#FE9543,#FF664F);
		color: #FFFFFF;
	}
	.act-course-content{
		width: 100%;
		padding: 22upx 30upx 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-bottom: 20upx;
	}
	.act-course-details{
		margin-top: 40upx;
	}
	.act-course-details-title{
		width: 100%;
		height: 64upx;
		line-height: 64upx;
		display: flex;
		padding-left: 20upx;
		box-sizing: border-box;
		background: #F4F5F9;
	}
	.act-course-details-title>text{
		display: inline-block;
		color:#666666;
		font-size: 24upx;
	}
	.act-course-details-title>text:nth-child(2){
		margin-left: 282upx;
	}
	.act-course-details-title>text:nth-child(3){
		margin-left: 104upx;
	}
	.act-course-details-common{
		width: 100%;
		padding: 20upx 0 18upx;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
		display: flex;
	}
	.act-course-details-common text{
		display: inline-block;
		color: #333333;
		font-size: 28upx;
	}
	.act-course-details-common>text:nth-child(1){
		width: 284upx;
		font-size: 24upx;
	}
	/* .act-course-details-common>text:nth-child(3){
		color: #FF391F;
		margin-left: 20upx;
	} */
	.group-bad{
		margin-top: 30upx;
		color: #FF391F;
		font-size: 24upx;
	}
	.adjust-succed{
		line-height: 44upx;
		color: #FE8846;
		font-size: 24upx;
		text-align: center;
		width: 200upx;
		height: 44upx;
		border: 2upx solid #FE8846;
		margin-top: 20upx;
	}
	.group-state-msg{
		display: flex;
		justify-content: space-between;
	}
	.group-state-msg-left{
		display: flex;
	}
	.group-state-msg-left>text{
		display: inline-block;
		color: #333333;
		font-size: 28upx;
		margin-left: 20upx;
		line-height: 80upx;
	}
	.group-state-msg-left>image{
		width: 80upx;
		height: 80upx;
	}
	.group-state-msg-right{
		color: #666666;
		font-size: 24upx;
		line-height: 80upx;
	}
	.group-state-msg-right>text{
		color: #333333;
	}
	.expend-content{
		width: 100%;
		background: #FFFFFF;
		padding:  0 30upx;
		box-sizing: border-box;
	}
	.expend-details-content{
		width: 100%;
		padding: 34upx 0;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
		display: flex;
		justify-content: space-between;
	}
	.expend-details-content:last-child{
		border: 0;
	}
	.expend-details-time{
		color: #333333;
		font-size: 28upx;
		margin-right: 86upx;
	}
	.expend-details-state{
		flex-grow: 1;
		display: flex;
		justify-content: space-between;
		font-size: 28upx;
	}
	.expend-details-state>view:last-child{
		color: #333333;
	}
	.expend-state-hand{
		color: #333333;
	}
	.expend-state-succed{
		color: #33B888;
	}
	.expend-state-bad{
		color: #FF391F;
	}
</style>
